<template>
  <div class="table-box">
    <ProTable ref="proTable" :request-api="getTableList" :columns="columns">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button :auth="'add'" type="primary" icon="CirclePlus" @click="openDrawer('新增')">新增字典</el-button>
        <el-button :auth="'batchAdd'" type="primary" icon="Upload" plain @click="batchAdd">批量添加字典</el-button>
        <el-button :auth="'export'" type="primary" icon="Download" plain @click="downloadFile">导出字典数据</el-button>
        <el-button type="danger" icon="Delete" plain :disabled="!scope.isSelected" @click="batchDelete(scope.selectedListIds)">
          批量删除字典
        </el-button>
      </template>

      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link icon="View" @click="openDrawer('查看', scope.row)">查看</el-button>
        <el-button type="primary" link icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button>
        <el-button type="primary" link icon="Delete" @click="deleteDict(scope.row)">删除</el-button>
      </template>
    </ProTable>
    <DictForm ref="formRef" />
    <ImportExcel ref="dialogRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import ImportExcel from "@/components/ImportExcel/index.vue";
import DictForm from "./form/index.vue"; // 导入字典表单组件
import { getDictList, deleteDict as deleteDictApi } from "@/api/modules/dict";

const proTable = ref();
const formRef = ref();

// 列配置
const columns = [
  { prop: "name", label: "字典名称" },
  { prop: "code", label: "字典编码" },
  {
    prop: "status",
    label: "状态",
    enum: [
      { value: 0, label: "停用" },
      { value: 1, label: "启用" }
    ]
  },
  { prop: "orderNum", label: "排序" },
  { prop: "remark", label: "备注" },
  { prop: "operation", label: "操作", fixed: "right", width: 200 }
];

// 获取字典列表
const getTableList = (params: any) => {
  return getDictList(params);
};

// 新增或编辑字典
const openDrawer = (title: string, row?: any) => {
  formRef.value.acceptParams({ title, row });
};

// 删除字典
const deleteDict = async (row: any) => {
  await useHandleData(deleteDictApi, { id: [row.id] }, `删除【${row.name}】字典`);
  proTable.value.getTableList();
};

// 批量删除字典
const batchDelete = async (ids: string[]) => {
  await useHandleData(deleteDictApi, { id: ids }, "删除所选字典");
  proTable.value.clearSelection();
  proTable.value.getTableList();
};

// 批量添加字典
const batchAdd = () => {
  // 实现批量添加逻辑
};

// 导出字典信息
const downloadFile = () => {
  // 实现导出逻辑
};
</script>
